<template>
	<view class="integralShop">
		<view class="myintergral">
			<text class="text1">我的积分：</text>
			<text class="text2" :style="{ color: newColor.color }">{{userinfo.gold || '0.00'}}</text>
		</view>
		<view class="my_fruits">
			<view class="fr_list" @tap="jumpMyfruit">
				<image src="../../static/image/nongchang/shop/shuiguo.png" mode=""></image>
				<p>我的水果</p>
			</view>
			<view class="fr_list" @tap="jumpOrder">
				<image src="../../static/image/nongchang/shop/order.png" mode="" class="order"></image>
				<p>积分订单</p>
			</view>
		</view>
		<view class="duihuan">
			<p class="title">积分兑换</p>
			<zyflow ref="zf" :flowlist="goodsList"></zyflow>
		</view>
	</view>
</template>

<script>
import zyflow from '@/components/zyflow/zyflow.vue';
import {getUserInfo} from '@/static/utils/ahth.js'
export default {
	components: {
		zyflow
	},
	data() {
		return {
			pageIndex: 1,
			goodsList:[],
			userinfo:{}
		};
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		let that = this;
		that.pageIndex = 1;
		setTimeout(function() {
			that.getGoodsList();
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom: function() {
		// pullScroll.success();
		console.log('上拉加载');
		let that = this;
		uni.showLoading({
			title: '加载中',
			duration: 500
		});
		setTimeout(() => {
			that.pageIndex++;
			that.request('CreditGoods/getGoodsList', {
				page: that.pageIndex,
				psize: 10,
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					let newdata = res.data;
					that.goodsList = that.goodsList.concat(newdata);
				}
				uni.hideLoading();
				if (res.data.length == 0) {
					uni.showToast({
						title: '已无更多数据',
						icon: 'none'
					});
				}
			});
		}, 1000);
	},
	onShow() {
		this.getUserData()
		this.getGoodsList()
	},
	methods:{
		jumpOrder(){
			this.$Router.push({path:'/pagesA/pages/orchard/order/order_list'})
		},
		jumpMyfruit(){
			this.$Router.push({path:'/pagesA/pages/orchard/order/myfruit'})
		},
		getGoodsList(){
			this.request('CreditGoods/getGoodsList',{
				page: this.pageIndex,
				psize: 10
			}).then(res=>{
				console.log(res);
				this.goodsList = res.data
			})
		},
		getUserData() {
			//获取个人信息
			this.request('user/getUserInfo', {}).then(res => {
				console.log(res);
				if(res.code == 200){
					this.userinfo = res.data;
				}else if(res.code == 400){
					this.userinfo = []
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.integralShop {
	.myintergral {
		margin: 0 30upx;
		height: 100upx;
		box-shadow: 0upx 0upx 10upx #cccccc;
		border-radius: 20upx;
		margin-top: 30upx;
		line-height: 100upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 0 20upx;
		.text1 {
			font-size: 32upx;
			color: #333333;
			font-weight: 500;
		}
		.text2 {
			font-size: 32upx;
			font-weight: bold;
			text-align: right;
			float: right;
		}
	}
	.my_fruits {
		margin: 0 30upx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		justify-content: space-between;
		margin-top: 20upx;
		.fr_list {
			height: 100upx;
			text-align: center;
			width: 300upx;
			height: 200upx;
			background-color: #ffffff;
			box-shadow: 0upx 0upx 10upx #cccccc;
			border-radius: 20upx;
			image {
				width: 100upx;
				height: 80upx;
				display: block;
				margin: 0 auto;
				margin-top: 40upx;
			}
			.order {
				width: 80upx;
				height: 80upx;
				transform: scale(0.9);
			}
			p {
				margin-top: 20upx;
				font-size: 24upx;
				color: #333333;
			}
		}
	}
	.duihuan{
		margin-top: 50upx;
		.title{
			text-align: center;
			margin-bottom: 20upx;
			color: #333;
			font-size: 32upx;
			font-weight: bold;
		}
	}
}
</style>
